<template>
	<view class="container">
		<view class="tabbar">
			<view class="icp-number">闽ICP备16027219号-2</view>
			<image class="tabbar-image" src="https://app.yycjkb.cn/index/fujiajia/tabbar.png" mode=""></image>
			<view :class="['tabbar-item', {'tab-active': index === currentIndex}]" v-for="(item, index) in tabList"
				:key="index" @tap="switchTab(index)">
				<image :src="index === currentIndex ? item.selectedIconPath : item.iconPath" class="tab-img" />
				<view :class="['tabbar-text', {'tabbar-text-active': index === currentIndex}]">
					{{ item.title }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentIndex: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				tabList: [{
						iconPath: "/static/tabbar/home.png",
						selectedIconPath: "/static/tabbar/home-select.png",
						title: "首页",
						path: "/pages/home/index",
						isTab: true
					},
					{
						iconPath: "/static/tabbar/class.png",
						selectedIconPath: "/static/tabbar/class-select.png",
						title: "分类",
						path: "/pages/home/goshop",
						isTab: true
					},
					{
						iconPath: "/static/tabbar/my.png",
						selectedIconPath: "/static/tabbar/my-select.png",
						title: "我的",
						path: "/pages/my/index",
						isTab: true
					}
				]
			};
		},
		methods: {
			switchTab(index) {
				const target = this.tabList[index];
				if (target.isTab) {
					uni.reLaunch({
						url: target.path,
						success: () => {
							this.$emit('update:currentIndex', index);
						}
					});
				} else {
					uni.navigateTo({
						url: target.path,
						success: () => {
							this.$emit('update:currentIndex', index);
						}
					});
				}
			}
		}
	};
</script>

<style lang="less" scoped>
	.tabbar {
		position: fixed;
		height: 178rpx;
		width: 750rpx;
		z-index: 999;
		bottom: 0%;
		left: 0%;
		display: flex;
		align-items: center;
	}

	.icp-number {
		position: absolute;
		bottom: 20rpx;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 20rpx;
		color: #999;
		/* 与未选中文字同色 */
		z-index: 20;
		/* 确保显示在最上层 */
	}

	.tabbar-image {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0%;
		bottom: 0%;
		z-index: -1;
	}

	.tabbar-item {
		z-index: 16;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 33.33%;
		float: left;
		padding: 10rpx 0;
	}

	.tab-img {
		width: 48rpx;
		height: 48rpx;
		transition: opacity 0.3s;
	}

	.tabbar-text {
		margin-top: 10rpx;
		font-size: 24rpx;
	}

	.tabbar-text-active {
		color: #ff9b45;
	}
</style>